<article>
  <h3>
    <div
      [class]="{
        'ticket-open': data().status === 'open',
        'ticket-closed': data().status === 'closed'
      }"
    ></div>
    <button (click)="onToggleDetails()">
      <span class="text">{{ data().title }}</span>
      <span>
        @if (detailsVisible()) {
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6"
          >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m19.5 8.25-7.5 7.5-7.5-7.5"
          />
        </svg>

        } @else {
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="w-6 h-6"
          >
          <path
            fill-rule="evenodd"
            d="M11.47 7.72a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06L12 9.31l-6.97 6.97a.75.75 0 0 1-1.06-1.06l7.5-7.5Z"
            clip-rule="evenodd"
          />
        </svg>
        }
      </span>
    </button>
  </h3>

  @if (detailsVisible()) {
    <p>{{ data().request }}</p>

    @if (data().status === 'open') {
      <p><button (click)="onMarkAsCompleted()">Mark as completed</button></p>
    } }
</article>

